<script setup lang="ts">
import { ref, watch } from 'vue'
// 定义 props
const props = defineProps({
  dialogInfo: {
    type: Object,
    default: () => {
      return {
        title: '', // 标题
        textAlign: 'left', // left center right 对齐方式
        style: 'lt', // 动画风格 左上：lt 左中：lm 左下：lb 右上：rt 右中：rm 右下：rb 中上：ct 中下：cb
        width: '30%', // 宽度
      }
    },
  } as any,
})

const dialogVisible = ref(false)
const changeDialogVisible = (val: boolean) => {
  // 查找 dom body，并添加 class  属性
  const body = document.querySelector('body')
  if (body) {
    body.classList.add('animation-dialog')
    body.classList.add(props.dialogInfo.style)
  }
  dialogVisible.value = val
}
// 向父级暴露 changeDialogVisible 方法
defineExpose({ changeDialogVisible })

// 监听 dialogVisible 值变化
watch(
  () => dialogVisible.value,
  (val) => {
    if (val === false) {
      // 查找 dom body，并删除 class  属性
      const body = document.querySelector('body')
      if (body) {
        // 移除所有 class
        body.removeAttribute('class')
      }
    }
  }
)
</script>

<template>
  <el-dialog
    class="transactionData"
    :append-to-body="true"
    :destroy-on-close="true"
    v-model="dialogVisible"
    :title="dialogInfo.title"
    :width="dialogInfo.width"
    align-center
    center
  >
    <slot />
  </el-dialog>
</template>

<style lang="scss">
.animation-dialog {
  .el-dialog {
    background: rgba(10, 22, 103, 0.8);
  }

  .el-dialog__header {
    padding: 20px;
    color: #fff;

    span {
      color: #fff;
      font-size: 20px;
      font-weight: bold;
    }
  }

  .el-dialog__body {
    padding: 10px;
    color: #fff;
  }
}
.human-dialog {
  .el-dialog {
    background: rgba(16, 80, 100, 0.8);
  }
}

.lt {
  .dialog-fade-enter-active .el-dialog.transactionData {
    // animation: slide-in-fwd-tl 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: tilt-in-fwd-tl 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
}

.lm {
  .dialog-fade-enter-active .el-dialog.transactionData {
    // animation: slide-in-fwd-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: tilt-in-left-1 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
}

.lb {
  .dialog-fade-enter-active .el-dialog.transactionData {
    // animation: slide-in-fwd-bl 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
}

.rt {
  .dialog-fade-enter-active .el-dialog.transactionData {
    // animation: slide-in-fwd-tr 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
}

.rm {
  .dialog-fade-enter-active .el-dialog.transactionData {
    // animation: slide-in-fwd-right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: tilt-in-right-1 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
}

.rb {
  .dialog-fade-enter-active .el-dialog.transactionData {
    // animation: slide-in-fwd-br 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: tilt-in-fwd-br 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
}

.ct {
  .dialog-fade-enter-active .el-dialog.transactionData {
    animation: slide-in-fwd-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
}
.cb {
  .dialog-fade-enter-active .el-dialog.transactionData {
    animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
      both;
  }
}

/**
 * ----------------------------------------
 * animation tilt-in-fwd-tl
 * ----------------------------------------
 */
@keyframes tilt-in-fwd-tl {
  0% {
    transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px)
      skew(35deg, -10deg);
    opacity: 0;
  }

  100% {
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-fwd-tl
 * ----------------------------------------
 */
@keyframes slide-in-fwd-tl {
  0% {
    transform: translateZ(-1400px) translateY(-800px) translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation tilt-in-left-1
 * ----------------------------------------
 */
@keyframes tilt-in-left-1 {
  0% {
    transform: rotateX(-30deg) translateX(-300px) skewX(-30deg);
    opacity: 0;
  }

  100% {
    transform: rotateX(0deg) translateX(0) skewX(0deg);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-fwd-left
 * ----------------------------------------
 */

@keyframes slide-in-fwd-left {
  0% {
    transform: translateZ(-1400px) translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation tilt-in-fwd-bl
 * ----------------------------------------
 */
@keyframes tilt-in-fwd-bl {
  0% {
    transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px)
      skew(-35deg, 10deg);
    opacity: 0;
  }

  100% {
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-fwd-bl
 * ----------------------------------------
 */
@keyframes slide-in-fwd-bl {
  0% {
    transform: translateZ(-1400px) translateY(800px) translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation tilt-in-fwd-tr
 * ----------------------------------------
 */
@keyframes tilt-in-fwd-tr {
  0% {
    transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px)
      skew(-35deg, 10deg);
    opacity: 0;
  }

  100% {
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-fwd-tr
 * ----------------------------------------
 */
@keyframes slide-in-fwd-tr {
  0% {
    transform: translateZ(-1400px) translateY(-800px) translateX(1000px);
    opacity: 0;
  }

  100% {
    transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation tilt-in-right-1
 * ----------------------------------------
 */
@keyframes tilt-in-right-1 {
  0% {
    transform: rotateX(-30deg) translateX(300px) skewX(30deg);
    opacity: 0;
  }

  100% {
    transform: rotateX(0deg) translateX(0) skewX(0deg);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-fwd-right
 * ----------------------------------------
 */
@keyframes slide-in-fwd-right {
  0% {
    transform: translateZ(-1400px) translateX(1000px);
    opacity: 0;
  }

  100% {
    transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation tilt-in-fwd-br
 * ----------------------------------------
 */
@keyframes tilt-in-fwd-br {
  0% {
    transform: rotateY(20deg) rotateX(-35deg) translate(300px, 300px)
      skew(35deg, -10deg);
    opacity: 0;
  }

  100% {
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-fwd-br
 * ----------------------------------------
 */
@keyframes slide-in-fwd-br {
  0% {
    transform: translateZ(-1400px) translateY(800px) translateX(1000px);
    opacity: 0;
  }

  100% {
    transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-fwd-top
 * ----------------------------------------
 */
@keyframes slide-in-fwd-top {
  0% {
    transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-fwd-bottom
 * ----------------------------------------
 */
@keyframes slide-in-fwd-bottom {
  0% {
    transform: translateZ(-1400px) translateY(800px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
</style>
